<template>
  <div class="h-100 w-100">
    <div style="height: 80px; width: 100%;margin-top: 20px;">
      <div class="w-100 d-flex justify-content-evenly" style="height: 60px">
        <div
          v-for="(item, index) in list"
          @click="swich(item, index)"
          class="item"
          :class="activeItem == index ? 'itemActive' : 'itemUnActive'"
        >
          <div style="width: 10px"></div>
          <div style="">
            {{ item }}
          </div>
          <div
            :class="activeItem == index ? 'iconActive' : 'iconUnActive'"
          ></div>
        </div>
      </div>
    </div>
    <div style="height: calc(90% - 80px)">
      <div v-if="activeItem == 0" class="d-flex w-100 h-100">
        <div style="height: 100%; width: 38%">
          <div id="xu3_1" style="width: 100%; height: 100%"></div>
        </div>
        <div style="height: 100%; width: 62%">
          <div class="glitem back1 d-flex" style="margin-top: 40px; ">
           <div  style="margin-left: 75px;">长江</div>
           <div  style="margin-left: 10px;  color: #0BF7FB;" >{{ cjdata }}立方千米</div>
          </div>
          <div class="glitem back2 d-flex" style="margin-top: 20px; ">
           <div  style="margin-left: 75px;">汉江</div>
           <div  style="margin-left: 10px;color: #B8EB8F;" >{{ hjdata }}立方千米</div>
          </div>
        </div>
      </div>

      <div v-if="activeItem == 1" class="d-flex w-100 h-100">
        <div style="height: 100%; width: 38%">
          <div id="xu3_2" style="width: 100%; height: 100%"></div>
        </div>
        <div style="height: 100%; width: 62%;flex-direction: column" class="d-flex ">
          <div v-for="(item , index) in hbData" class="d-flex h-25 w-100  justify-content-betwee " style="border-bottom:1px rgba(255, 255, 255, 0.2) solid ;" >
            <FakeLegend
        style="margin: auto 30px auto 0px"
          :color="convertColors([hbcolors[index]])"
          :text="[item.label]"
          :orient="'column'"
        >
        </FakeLegend>
        <div style="margin-right: 10px;font-size: 20px; line-height: 60px;" 
        :style="{ color: convertColors([hbcolors[index]]) }">
        {{ item.value }}万立方米 </div>
          </div>
       
       </div>
      </div>


      <div v-if="activeItem == 2" class="d-flex w-100 h-100">
        <div style="height: 100%; width: 38%">
          <div id="xu3_3" style="width: 100%; height: 100%"></div>
        </div>
        <div
          class=" h-90 autoscoll"
          style="overflow: auto; overflow-x: hidden;width:62% ;"
        >
          <div style="height: 600px;width: 100%;">
            <!-- //滚动 -->
            <div style="height: 100%; width: 100%;flex-direction: column" class="d-flex ">
          <div v-for="(item , index) in gqData" class="d-flex h-25 w-100  justify-content-between " style="border-bottom:1px rgba(255, 255, 255, 0.2) solid ;" >
            <FakeLegend
        style="margin: auto 30px auto 0px"
          :color="convertColors([gqcolors[index]])"
          :text="[item.label]"
          :orient="'column'"
        >
        </FakeLegend>
        <div style="margin-right: 10px;font-size: 20px; line-height: 60px;" 
        :style="{ color: convertColors([gqcolors[index]]) }">
        {{ item.value }}万立方米 </div>
          </div>
       
       </div>
            <!-- //滚动 -->
          </div>
        </div>
  
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useFunc } from "@/hook/useFunc";
import * as echarts from "echarts";
const list = ["干流", "湖泊", "港渠"];
const cjdata=ref(39.3)
const hjdata=ref(29)
let myChart1: any = null;
let myChart2: any = null;
let myChart3: any = null;
const swich = (item: any, index: any) => {
  activeItem.value = index;
  console.log(activeItem.value, "fdnwko");
  if (index == 0) {
    clear()
    setTimeout(() => {
      myChart1 = echarts.init(document.getElementById("xu3_1") as HTMLElement);
      myChart1.setOption(calcOption(6830,colors,data));
    }, 100);
  } else if (index == 1) {
    clear()
    setTimeout(() => {
    myChart2 = echarts.init(document.getElementById("xu3_2") as HTMLElement);
    myChart2.setOption(calcOption(hbData.reduce((accumulator, currentValue) => accumulator + currentValue.value, 0),hbcolors,hbData));
  }, 100);

  } else if (index == 2) {
    clear()
    setTimeout(() => {
    myChart3 = echarts.init(document.getElementById("xu3_3") as HTMLElement);
    myChart3.setOption(calcOption(gqData.reduce((accumulator, currentValue) => accumulator + currentValue.value, 0),gqcolors,gqData));
    const scrollContainer = document.querySelector(".autoscoll");
   useFunc().autoScroll(scrollContainer, "vertical");
  }, 100);
  }
};
const clear = () => {
  if (myChart1) {
    myChart1.dispose();
  }
  if (myChart2) {
    myChart2.dispose();
  }
  if (myChart3) {
    myChart3.dispose();
  }
};

const activeItem = ref(0);
const jsonData: any = inject("jsonData");

let data: any
let hbData: any
let gqData: any
// let data:any = [
//   {
//     label: "幼年",
//     value: 320,
//   },
//   {
//     label: "青年",
//     value: 430,
//   },
// ];

// let hbData=[
//   {
//     label:'月湖',
//     value:325.6
//   },
//   {
//     label:'墨水湖',
//     value:398
//   },
//   {
//     label:'莲花湖',
//     value:296
//   },
//   {
//     label:'龙阳湖',
//     value:628
//   }
// ]
// let gqData=[
//   {
//     label:"琴断小河",
//     value:76
//   },
//   {
//     label:"朱家老港",
//     value:95
//   },
//   {
//     label:"朱家新港",
//     value:78
//   },
//   {
//     label:"龙口渠",
//     value:165
//   },
//   {
//     label:"龙新渠",
//     value:135
//   },
//   {
//     label:"总港",
//     value:69
//   },
//   {
//     label:"连通港",
//     value:98
//   },
//   {
//     label:"四新渠",
//     value:67
//   },
//   {
//     label:"明珠河",
//     value:237
//   },
//   {
//     label:"什湖东港",
//     value:16
//   },
//   {
//     label:"火焰沟",
//     value:36
//   }
// ]
const colors = [["0, 207, 230"], ["184, 235, 143"]];
const hbcolors=[["92, 225, 255"],['230, 253, 255'],['184, 235, 143'],['253, 63, 82']]
const gqcolors=[["92, 225, 255"],['230, 253, 255'],['184, 235, 143'],['253, 63, 82'],['254, 126, 29'],['96, 255, 206'],['255, 120, 251'],['87, 143, 255'],['151, 255, 92'],['123, 127, 222'],['191, 219, 42'],]
const convertColors=(inputArray:any)=> {
    return inputArray.map((colorArray:any) => {
        // 提取每个数组中的颜色值并分割为单独的数字
        const colors = colorArray[0].split(', ').map(Number);
        // 根据颜色值数量决定是使用 rgb 还是 rgba 格式
        if (colors.length === 3) {
            return [`rgb(${colors.join(', ')})`];
        } else if (colors.length === 4) {
            return [`rgba(${colors.join(', ')})`];
        }
    });
}
const props = defineProps({
  echartsData: {
    type: Array,
    default: () => [],
  },
});
onMounted(() => {
  data=props.echartsData[0]
  hbData=props.echartsData[1]
  gqData=props.echartsData[2]
  console.log(hbData,'hbData');
  
  myChart1 = echarts.init(document.getElementById("xu3_1") as HTMLElement);
  myChart1.setOption(calcOption(200,colors,data));
});
const calcOption=(count:any,colorList:any,data:any)=>{
 return  {
    title: [
      {
        text: count,
        x: "center",
        y: "40%",
        textStyle: {
          fontWeight: "normal",
          fontSize: 24,
          color: "#fff",
        },
      },
      {
        text: "万立方米",
        x: "center",
        y: "50%",
        textStyle: {
          fontWeight: "normal",
          fontSize: 20,
          color: "#6B747F",
        },
      },
    ],
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
    },
    tooltip: {
      show: false,
    },

    series: [
      {
        name: "干流",
        type: "pie",
        radius: ["65%", "80%"],
        center: ["50%", "50%"],
        itemStyle: {
          normal: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            shadowBlur: 0,
            shadowColor: "#203665",
          },
        },
        data: data.map((it:any, i:any) => {
          return {
            value: it.value,
            name: it.label,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  {
                    offset: 0.05,
                    color: `rgba(${colorList[i][0]},0.2)`,
                  },
                  {
                    offset: 0.5,
                    color: `rgba(${colorList[i][0]},0.5)`,
                  },
                  {
                    offset: 1,
                    color: `rgba(${colorList[i][0]},1)`,
                  },
                ]),
              },
              color: `rgba(${colorList[i]},0.7)`,
              borderColor: `rgba(${colorList[i]},1)`,
              borderWidth: 1,
            },
          };
        }),
      },
      {
        type: "pie", // 内层细圆环2
        radius: ["55%", "56%"],
        hoverAnimation: false,
        clockWise: false,
        itemStyle: {
          color: "#2858BA",
        },
        label: {
          show: false,
        },
        data: [1],
      },
    ],
  };
}
</script>

<style scoped lang="less">
.imgcircle {
  background: url("../../../../assets/image/underGround/water_k.png");
  background-size: 100% 100%;
  margin: auto;
  text-align: center;
  font-size: 22px;
  line-height: 100px;
  padding: 0 10px 0 5px;
}
.item {
  background-color: rgba(4, 55, 61, 0.9);
  font-size: 20px;
  font-family: "OPPOSans-Regular";
  line-height: 60px;
  flex-grow: 1;
  text-align: center;
  margin: 0px 10px 0px 10px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}
.itemActive {
  padding: 0px 10px 0px 10px;
  font-size: 24px;
  text-shadow: 0px 0px 10px #b8eb8f;
  color: rgba(230, 253, 255, 1); /* 选中时的字体颜色 */
  border-bottom: 3px solid rgba(3, 230, 254, 1); /* 选中时的底部边框 */
}
.itemUnActive {
  padding: 0px 10px 0px 10px;
  font-size: 24px;
  color: rgba(230, 253, 255, 0.5); /* 选中时的字体颜色 */
}
.iconUnActive {
  margin-top: 15px;
  width: 25px;
  height: 25px;
  background: url("@/assets/image/underGround/location_grey.png");
  background-size: 100% 100%;
}
.iconActive {
  width: 25px;
  height: 25px;
  margin-top: 15px;
  background: url("@/assets/image/underGround/location.png");
  background-size: 100% 100%;
}
.glitem {
  width: 100%;
  height: 30%;
  background-size: 100% 100%;
  margin-top: 10px;
  font-weight: 400;
  line-height: 70px;
  font-size: 27px;
  font-family: "优设标题黑";
}
.back1 {
  background: url("../../../../assets/image/underGround/cj.png");
}
.back2 {
  background: url("../../../../assets/image/underGround/hj.png");
}
</style>
